<!--
 * @Author: your name
 * @Date: 2020-10-09 18:07:51
 * @LastEditTime: 2020-10-10 14:22:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3\src\views\Plan\create.vue
-->
<template>
    <a-form :model="form"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }">
        <a-form-item label="计划日期">
            <a-date-picker v-model:value="form.date"
                           type="date"
                           placeholder="选择计划的日期"
                           style="width: 100%;" />
        </a-form-item>
        <a-form-item label="请选择耗时">
            <a-input-number v-model:value="form.time"
                            :min='1'
                            :max="10" />
        </a-form-item>
        <a-form-item label="请输入代办事项">
            <a-textarea v-model:value="form.content"
                        placeholder="请输入代办事项" />
        </a-form-item>
        <a-form-item>
            <a-button type='primary'
                      @click="onSubmit()">创建任务</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
import { reactive, toRefs } from 'vue';
import moment from 'moment';
export default {
    setup(props, context) {
        const state = reactive({
            form: {
                date: moment(Date.now()).format('YYYY-MM-DD'),
                time: 1,
                content: ''
            }
        })
        const onSubmit = () => {
            context.emit('handlePlan',state.form);
        }
        return {
            ...toRefs(state),
            onSubmit
        }
    }
};
</script>
